<template>
	<view class="container">
		<!-- 消息详情卡片 -->
		<view class="message-card">
			<view class="message-header">
				<image class="avatar" :src="messageInfo.avatar" mode="aspectFill"></image>
				<view class="header-info">
					<text class="title">{{messageInfo.name}}</text>
					<text class="time">{{messageInfo.time}}</text>
				</view>
			</view>
			
			<view class="message-content">
				<text class="content-text">{{messageInfo.content}}</text>
			</view>
			
			<view class="message-footer" v-if="messageInfo.attachments && messageInfo.attachments.length">
				<view class="attachment-item" v-for="(item, index) in messageInfo.attachments" :key="index">
					<uni-icons :type="getAttachmentIcon(item.type)" size="20" color="#666"></uni-icons>
					<text class="attachment-name">{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<!-- 相关操作按钮 -->
		<view class="action-buttons">
			<button class="action-btn primary" @click="handleAction('confirm')">确认</button>
			<button class="action-btn secondary" @click="handleAction('more')">更多操作</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			messageInfo: {
				id: 1,
				name: '系统通知',
				avatar: '/static/images/system-notice.png',
				time: '2024-03-20 10:30',
				content: '您有一个新的课程提醒：\n\n课程名称：医学基础理论\n上课时间：2024-03-21 14:00\n上课地点：第一教学楼 301教室\n\n请准时参加课程，如有特殊情况请提前请假。',
				attachments: [
					{
						type: 'pdf',
						name: '课程大纲.pdf'
					},
					{
						type: 'doc',
						name: '课前预习资料.doc'
					}
				]
			}
		}
	},
	methods: {
		getAttachmentIcon(type) {
			const iconMap = {
				'pdf': 'file-pdf',
				'doc': 'file-word',
				'xls': 'file-excel',
				'ppt': 'file-powerpoint',
				'image': 'image',
				'default': 'file'
			}
			return iconMap[type] || iconMap.default
		},
		handleAction(type) {
			switch(type) {
				case 'confirm':
					uni.showToast({
						title: '已确认',
						icon: 'success'
					})
					break
				case 'more':
					uni.showActionSheet({
						itemList: ['标记为已读', '删除消息', '举报'],
						success: (res) => {
							switch(res.tapIndex) {
								case 0:
									uni.showToast({
										title: '已标记为已读',
										icon: 'success'
									})
									break
								case 1:
									uni.showModal({
										title: '提示',
										content: '确定要删除这条消息吗？',
										success: (res) => {
											if (res.confirm) {
												uni.showToast({
													title: '已删除',
													icon: 'success'
												})
												setTimeout(() => {
													uni.navigateBack()
												}, 1500)
											}
										}
									})
									break
								case 2:
									uni.showToast({
										title: '举报功能开发中',
										icon: 'none'
									})
									break
							}
						}
					})
					break
			}
		}
	},
	onLoad(options) {
		// 这里可以根据传入的id获取消息详情
		if (options.id) {
			// 实际项目中应该调用API获取消息详情
			console.log('获取消息ID:', options.id)
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	background-color: #f5f6fa;
	min-height: 100vh;
}

.message-card {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.message-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.header-info {
	flex: 1;
}

.title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	display: block;
}

.time {
	font-size: 24rpx;
	color: #999;
	margin-top: 6rpx;
	display: block;
}

.message-content {
	padding: 20rpx 0;
	border-top: 2rpx solid #f5f5f5;
	border-bottom: 2rpx solid #f5f5f5;
}

.content-text {
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
	white-space: pre-wrap;
}

.message-footer {
	padding-top: 20rpx;
}

.attachment-item {
	display: flex;
	align-items: center;
	padding: 16rpx 0;
}

.attachment-name {
	font-size: 26rpx;
	color: #666;
	margin-left: 10rpx;
}

.action-buttons {
	margin-top: 40rpx;
	display: flex;
	gap: 20rpx;
}

.action-btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	font-size: 28rpx;
	
	&.primary {
		background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
		color: #fff;
	}
	
	&.secondary {
		background-color: #fff;
		color: #3498db;
		border: 2rpx solid #3498db;
	}
}
</style> 